<template>
     <div class="menu">
        <ul>
            <li>
                <router-link active-class="active" :class="{'router-link-exact-active':isIndex}" to="/"
             >
                    <i class="enter-icon"></i><br/>课程
                </router-link>
            </li>
            <li v-show="false">
                <router-link active-class="active"  to="/service" >
                    <i class="service-icon"></i><br/>服务
                </router-link>
            </li>
            <li>
                <router-link active-class="active" to="/recommend" >
                    <i class="continue-icon"></i><br/>续报
                </router-link>
            </li>
            <li>
                <router-link v-if="!hasLogin" active-class="active" :to="{path:'/login',query:{backUrl:backUrl}}" >
                    <i class="mine-icon"></i><br/>快速登录
                </router-link>
                <router-link v-else active-class="active" to="/mine" >
                    <i class="mine-icon"></i><br/>我的
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
name: 'bottom',
data: function () {
        return {
            hasLogin: localStorage.getItem('accessToken')?true:false,
            backUrl:document.location.href,
            isIndex:false
        }
    },
    created(){
        console.log(this.hasLogin)
    },
    methods: {
        addIndexActiveClass(to){
            if(this.$route.path == '/' || (to && to.path == '/')){
                this.isIndex=true
            }else{
                this.isIndex=false
            }
        }
    },
    watch:{
        $route(to,from){
            this.addIndexActiveClass(to);
            this.hasLogin = localStorage.getItem('accessToken')?true:false;
            // if(to.path == '/'){
            //     this.isIndex=true
            // }else{
            //     this.isIndex=false
            // }
        }
    },
    mounted () {
        this.addIndexActiveClass();
    }
}
</script>

<style>
div.menu{
    height: 9.9rem;
    font-size: 2.4rem;
    background: #f8f8f8;
}
/* 所有class为menu的div中的ul样式 */
div.menu ul
{
    position: fixed;
    opacity: .9;
    bottom: 0;
    max-width: 80rem;
    width: 100%;
    height: 9.9rem;
    border-top:1px solid #cccccc;
    color: #333333;
    z-index: 1000;
    background: white;
    list-style:none; /* 去掉ul前面的符号 */
    margin: 0px; /* 与外界元素的距离为0 */
    padding: 0px; /* 与内部元素的距离为0 */
    width: 100%; /* 宽度根据元素内容调整 */
    display: flex !important;
    display: -webkit-flex !important;
    text-align: center;
    /*line-height: 8.8rem;*/

}
/* 所有class为menu的div中的ul中的li样式 */
div.menu ul li
{
    /*float:left;  向左漂移，将竖排变为横排 */
    display: inline-block;
    flex: 1;
    -webkit-flex: 1;
}
/* 所有class为menu的div中的ul中的a样式(鼠标点击元素时的样式) */
div.menu ul li a
{
    /*background-color: #465c71;  背景色 */
    color: #666; /* 文字颜色 */
    text-decoration: none; /* 不显示超链接下划线 */
    display: inline-block;
    width: 100%;
    height: 100%;
    padding-top: 1rem;
    line-height: 2.8rem;
}
.menu i{
    /* width: 4rem;
    height: 4rem; */
    display: inline-block;
    background-size: cover;

}
.menu .router-link-exact-active i{
    background-size: cover !important;
}
.menu .router-link-exact-active{
    color: #000;
}
.menu .router-link-exact-active .enter-icon{
    background: url("../../assets/img/enter1.png");
}
.enter-icon{
    width: 5.3rem;
    height: 4.6rem;
    background: url("../../assets/img/enter1-gray.png");
}
.menu .router-link-exact-active .service-icon{
    background: url("../../assets/img/service.png");
}
.service-icon{
    background: url("../../assets/img/service-gray.png");
}
.menu .router-link-exact-active .continue-icon{
    background: url("../../assets/img/continue1.png");
}
.continue-icon{
    width: 4.4rem;
    height: 4.6rem;
    background: url("../../assets/img/continue1-gray.png");
}
.menu .router-link-exact-active .mine-icon{
    background: url("../../assets/img/mine1.png");
}
.mine-icon{
    width: 4.2rem;
    height: 4.7rem;
    background: url("../../assets/img/mine1-gray.png");
}
</style>
